Estoy usando Gatsby Develop y cuando ingreso este código para uno de mis componentes, se ejecuta y crea los divs; sin embargo, cuando actualizo la página, aparece el error 'No se pueden leer las propiedades de nulo (leyendo 'appendChild')' para la línea ' contenedor.appendChild(círculo);'. ¿Por qué dosificar esta aplicación solo cuando actualizo la página y cómo soluciono esto?
const Fun = () => { const container = document.getElementById('container'); let row = 15; let col = 15; for(let i = 0; i < col; i++){ for(let j = 0; j < row; j++){ const circle = document.createElement('div'); container.appendChild(circle); } } return ( <div className={funWrapper}> <div id={'container'} className={funContainer}/> </div> ) }Está creando y manipulando un DOM virtual (vDOM) con React (por lo tanto, con Gatsby) mientras su código apunta y manipula el DOM real (debido al uso del document ).
React no está al tanto de los cambios fuera de su alcance y viceversa, por lo que nunca sabrá de los cambios en el DOM real como el que estás haciendo.
En su caso, por eso, el contenedor puede existir o no en el momento en que intenta solicitarlo (debido a la actualización).
Puede aprovechar el gancho useRef para crear referencias sobre elementos en el DOM virtual para crear exactamente el mismo comportamiento dentro del alcance de React.
const Fun = () => { const container = useRef(null); useEffect(()=>{ container.current.appendChild('<div>a circle</div>') }, []) return ( <div className={funWrapper}> <div id={'container'} ref={container} className={funContainer}/> </div> ) } La idea es esperar el ciclo de vida de React hasta que se cargue el árbol DOM, eso es lo que hace useEffect con dependencias vacías ( [] ). Puede intentar agregar su anterior dentro, pero romperá el alcance de vDOM-DOM que mencioné antes a pesar de que puede funcionar.
Como puede ver, container.current contiene la referencia de su <div> y mantiene exactamente la misma información que document.getElementById .